<template>
	<view class="contener">
		<skeleton :skeleton="skeleton" :loading="loading">
			<block>
				<view class="back">
				</view>
				<scroll-view scroll-y @scrolltolower="loadMoreData(id)">
					<view class="titBack text-gradient">拼团专区</view>

					<view class="list" v-for="item in rentList" :key='item.id' @tap='goBulkDetail(item.id)'>
						<view class="imageBox">
							<image :src="imgapi+item.avatar" mode="aspectFill"></image>
						</view>
						<view class="right">
							<view class="tit">
								{{item.title}}
							</view>
							<view class="person textOver">

								<view class="priceTit">
									最多可返现<text class="priceQuare">{{returnMax}}</text>元
								</view>
								<text class="join">已拼{{item.sale}}</text>
							</view>
							<view class="price">
								<view class="leftPrice">
									<text class="littleMon" style="color: #d94e2e;">￥</text>{{item.discountPrice}}
									<view class="littleMon grayPrice" style="text-decoration: line-through;">
										￥<text>{{item.originalPrice}} </text>
									</view>
								</view>
								<button type="default">
									去拼单
									<!-- <image src="../../static/images/shop/shandian.png" mode=""></image> -->
								</button>
							</view>
						</view>
					</view>

					<!-- 下拉加载更多 -->
					<uni-load-more color="#607D8B" :status="status" :icon-size="14" :content-text="contentText" />
				</scroll-view>
			</block>
		</skeleton>
	</view>
</template>

<script>
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	export default {
		components: {
			Skeleton
		},
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				loading: false,

				ifBottomRefresh: false, //下拉加载
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '暂无更多~'
				},

				params: { //请求默认值
					pageNo: 1,
					pageSize: 10,
					type: 1,
					status: ""
				},

				rentList: [], //租聘列表
				imgapi: "",
				status: 'more',
				timer: null,

				loading: true,
				skeleton: [
					'card-lg',
					'line',
					'square-lg+square-lg',
					'line+line',
					'line+line',

				], //骨架屏
				
				locationObj:{}, // 定位
				returnMax:0,
			}
		},
		onLoad() {
			this.getList()
		},

		methods: {
			// 清空数据
			cleanList() {
				this.rentList = [];
				this.params = {
					pageNo: 1,
					pageSize: 10,
					type: 1
				}
				this.status = 'loading';
				this.ifBottomRefresh = true
			},

			// 获取列表数据
			getList() {
				this.locationObj = uni.getStorageSync("dingwei")
				console.log(this.locationObj);
				if(!this.locationObj){
					uni.navigateTo({
						url:"../growVegetables/location"
					})
					return
				}
				
				this.imgapi = this.$reqConfig.URLIMAGE
				this.$axios({
					url: "user/public/groupGoodsList",
					method: "post",
					data: {
						pageNo: this.params.pageNo,
						pageSize: this.params.pageSize,
						lat: this.locationObj.latitude,
						lng: this.locationObj.longitude,
					}
				}).then((res) => {
					//请求接口成功之后，判断加载状态，处理数据						
					if (res.result.pages >= this.params.pageNo) {
						this.params.pageNo++;
						if (this.ifBottomRefresh) {
							this.rentList = this.rentList.concat(res.result.list)
							this.ifBottomRefresh = false
							console.log('222', this.rentList)
						} else {
							this.rentList = res.result.records
						}
						let arr = this.rentList.map(val=>val.originalPrice - val.discountPrice)
						this.returnMax = Math.min.apply(Math, arr)
						
					} else {
						this.status = 'noMore'
					}
					// 骨架屏取消
					this.loading = false;
				})
			},

			// 底部刷新
			loadMoreData() {
				// 防止多次触发,节流
				if (!this.timer) {
					this.timer = setTimeout(() => {
						if (this.status != 'noMore') {
							console.log("触底")
							this.status = 'loading';
							this.ifBottomRefresh = true
							//正式服去掉这个延时器
							this.getList()
						} else {
							console.log('123')
							this.status = "noMore"
						}
						this.timer = null
					}, 500)
				}
			},

			goDetail(id, juli) {
				console.log('2', id);
				uni.navigateTo({
					url: `./indexDetail?id=${id}&juli=${juli}`
				})
			},
			goBulkDetail(id) {
				console.log('233', id);
				uni.navigateTo({
					url: `./bulkDetail?id=${id}`
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.priceTit {
		padding: 5rpx 12rpx;
		background-color: #d94e2e;
		color: #fff;
		font-size: 24rpx;
		border-radius: 100rpx;

		.priceQuare {
			background-color: #fff;
			padding: 0 5rpx;
			border-radius: 100rpx;
			color: $theme-buy-color;
			margin: 0 5rpx;
			font-weight: bold;
			font-size: 30rpx;
		}
		
	}

	.contener {
		height: 100vh;
	}

	.back {
		/* background: #85cb13; */
		background: url('https://www.tdtye.com/files/vegetable_mall_file/default/group.jpg') no-repeat;
		background-size: cover;
		height: 100%;
		width: 100%;
		position: absolute;
		z-index: -99;
	}

	.titBack {
		text-align: center !important;
		margin: 70rpx auto;
	}

	.text-gradient {
		background-image: -webkit-linear-gradient(bottom, #e7ffc2, #f5ffe4, #fffffe);
		-webkit-background-clip: text;
		color: transparent;
		font-size: 40px;
		font-weight: bold;
		z-index: 20;
	}

	.text-gradient::before {
		content: "拼团专区";
		position: absolute;
		z-index: -1;
		text-shadow: 5px 5px 3px #129129;
	}

	.gradient-text {
		text-align: left;
		line-height: 50px;
		font-size: 40px;
		font-weight: bolder;
		position: relative;
		text-shadow: 2px 3px 1px;
		z-index: -1;
	}


	.back image {
		height: 100vh;
	}


	scroll-view {
		height: 100vh;
	}

	.list {
		width: 46%;
		background: #fff;
		display: inline-block;
		margin: 20rpx;
		margin-right: 0px;
		border-radius: 15rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 0;
	}

	.list .imageBox {
		overflow: hidden;
	}

	.list .imageBox image {
		width: 100%;
		height: 294rpx;
		border-radius: 15rpx;
	}

	.right .tit {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.right .person {
		margin: 10rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 5rpx;
		font-size: 0;
	}

	.person .join {
		margin-left: 15rpx;
		font-size: 25rpx;
		color: #b8b8b8;
	}

	.right .price {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.right .price .leftPrice {
		// color: #ff7800;
		color: #d94e2e;
		font-weight: bold;
		font-size: 32rpx;
		white-space: nowrap;
		width: 200rpx;
		
		.littleMon{
			font-size: 20rpx;
			font-weight: bold;
			display: inline-block;
		}
		.grayPrice{
			color: #b4b4b4;
			margin-left: 10rpx;
		}
	}

	/* .right .price .leftPrice text {
		transform: scale(.8);
		display: inline-block;
		font-size: 30rpx;
		text-decoration: line-through;
	} */

	.right .price button {
		margin-right: 0;
		background-image: linear-gradient(#9bce24, #75b608);
		font-size: 21rpx;
		padding: 0px 18rpx;
		border-radius: 50rpx;
		color: #fff;
	}

	.right .price button image {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
	}
</style>
